import 'package:flutter/material.dart';
import 'package:wanandroid_flutter/api/common_service.dart';

import 'package:wanandroid_flutter/model/navi_model.dart';
import 'package:wanandroid_flutter/utils/router_push_util.dart';

class NaviPage extends StatefulWidget {
  _NaviPageState createState() => _NaviPageState();
}

class _NaviPageState extends State<NaviPage>
    with AutomaticKeepAliveClientMixin {
  List<NaviData> _naviTitles = List();

  void initState() {
    _getData();
    super.initState();
  }

  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('导航'),
      ),
      body: Row(
        children: <Widget>[
          Container(
            width: 120,
            child: _leftListView(context),
            color: Colors.black12,
          ),
          Expanded(
            child: _rightListView(context),
          ),
        ],
      ),
    );
  }

  Widget _leftListView(BuildContext context) {
    return ListView.builder(
      itemBuilder: _renderRow,
      itemCount: _naviTitles.length,
    );
  }

  Widget _rightListView(BuildContext context) {
    return ListView.builder(
      itemBuilder: _renderContent,
      itemCount: _naviTitles.length,
    );
  }

  Widget _renderRow(BuildContext context, int index) {
    return Container(
      alignment: Alignment.center,
      height: 50,
      child: Text(_naviTitles[index].name),
    );
  }

  Widget _renderContent(BuildContext context, int index) {
    return Container(
      child: Container(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              alignment: Alignment.centerLeft,
              padding: const EdgeInsets.only(
                bottom: 18.0,
              ),
              child: Text(
                _naviTitles[index].name,
                style: TextStyle(
                  fontSize: 16.0,
                ),
                textAlign: TextAlign.left,
              ),
            ),
            Container(
              alignment: Alignment.centerLeft,
              child: buildChildren(_naviTitles[index].articles),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildChildren(List<NaviArticle> children) {
    List<Widget> tiles = [];

    for (var child in children) {
      tiles.add(
        InkWell(
          child: Chip(
            label: Text(child.title),
          ),
          onTap: () {
            RouterPush.toWebview(context, child.title, child.link);
          },
          borderRadius: BorderRadius.circular(30.0),
        ),
      );
    }

    return Wrap(
      spacing: 8.0,
      runSpacing: 4.0,
      alignment: WrapAlignment.start,
      children: tiles,
    );
  }

  Future<Null> _getData() async {
    CommonService().getNaviList((NaviModel _naviModel) {
      setState(() {
        _naviTitles = _naviModel.data;
      });
    });
  }
}
